<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { getNewListingInformation } from '../api/api'
import { ElMessage } from 'element-plus';

//元素对象
const newStock_index_carousel_content_framework = ref(null)

//当前页
const current_page = ref(1)
//总页数
const total_page = computed(() => {
  return Math.ceil(total_size.value / page_size.value)
})
//总数据量
const total_size = ref(0)
//每页的数据量
const page_size = ref(6)
//三个页面的v-for绑定数据
const newStock_index_1 = ref([])
const newStock_index_2 = ref([])
const newStock_index_3 = ref([])
//存储三个页面的位置顺序
const newStock_index_order = ref([
  newStock_index_1,
  newStock_index_2,
  newStock_index_3,
])
//鼠标点击的起始位置
const start_x = ref(null)
//自动轮播定时器ID
const autoPlayID = ref(-1)
//自动刷新定时器ID
const autoRefreshID = ref(-1)

//移动至上个数据页
const prevCarousel = async () => {
  if (current_page.value <= 1) {
    current_page.value = total_page.value
  } else {
    current_page.value--
  }
  let temp_data = await getNewListingInformation(
    current_page.value,
    page_size.value
  )
  newStock_index_order.value[0].value = temp_data.data.data.records
  total_size.value = temp_data.data.data.total
  setTimeout(prevPage, 100)
}
//移动至下个数据页
const nextCarousel = async () => {
  if (current_page.value >= total_page.value) {
    current_page.value = 1
  } else {
    current_page.value++
  }
  let temp_data = await getNewListingInformation(
    current_page.value,
    page_size.value
  )
  newStock_index_order.value[2].value = temp_data.data.data.records
  total_size.value = temp_data.data.data.total
  setTimeout(nextPage, 100)
}

//页面前移
const prevPage = async () => {
  if (newStock_index_carousel_content_framework.value !== null) {
    let childs = newStock_index_carousel_content_framework.value.children
    //将最后一个页面提前
    let move_child = childs[2]
    newStock_index_carousel_content_framework.value.insertBefore(
      move_child,
      childs[0]
    )
    //修改位置信息
    childs[0].style.left = 0 + '%'
    childs[1].style.left = 33.3 + '%'
    childs[2].style.left = 66.6 + '%'
    //重新排序
    let temp_element = newStock_index_order.value.pop()
    newStock_index_order.value.unshift(temp_element)
  }
}
//页面后移
const nextPage = async () => {
  if (newStock_index_carousel_content_framework.value !== null) {
    let childs = newStock_index_carousel_content_framework.value.children
    //将第一个页面移动至最后
    let move_child = await childs[0]
    newStock_index_carousel_content_framework.value.appendChild(move_child)
    //修改位置信息
    childs[0].style.left = 0 + '%'
    childs[1].style.left = 33.3 + '%'
    childs[2].style.left = 66.6 + '%'
    //重新排序
    let temp_element = newStock_index_order.value.shift()
    newStock_index_order.value.push(temp_element)
  }
}

//轮播图手势事件
const getCurrent = (event) => {
  start_x.value = event.clientX
}
const judgeMoveDirection = (event) => {

  if (start_x.value !== null) {
    let current_x = event.clientX
    if (current_x - start_x.value > 40) {
      if (total_page.value === 1) {
        ElMessage({
          showClose: true,
          message: '该数据只有一页.',
        })
        startAutoRefreshInfo()
      } else {
        stopAutoRefreshInfo()
        prevCarousel()
      }
    } else if (current_x - start_x.value < -40) {
      if (total_page.value === 1) {
        ElMessage({
          showClose: true,
          message: '该数据只有一页.',
        })
        startAutoRefreshInfo()
      } else {
        stopAutoRefreshInfo()
        nextCarousel()
      }
    }
  }
  start_x.value = null
}
//自动滚动启停事件
const startChinaIndexAutoPlay = () => {
  autoPlayID.value = setInterval(() => {
    if (total_page.value === 1) {
      startAutoRefreshInfo()
    }else{
      stopAutoRefreshInfo()
      nextCarousel()
    }
  }, 5000)
}
const stopChinaIndexAutoPlay = () => {
  clearInterval(autoPlayID.value)
}
//自动刷新定时任务
const startAutoRefreshInfo = () => {
  if (autoRefreshID.value === -1) {
    autoRefreshID.value = setInterval(async () => {
      let temp_data = await getNewListingInformation(
        current_page.value,
        page_size.value
      )
      newStock_index_order.value[1].value = temp_data.data.data.records
      total_size.value = temp_data.data.data.total
    }, 5000)
  }

}
const stopAutoRefreshInfo = () => {
  if (autoRefreshID.value !== -1) {
    clearInterval(autoRefreshID.value)
    autoRefreshID.value = -1
  }
}

onMounted(async () => {
  let temp_data = await getNewListingInformation(1, page_size.value)
  newStock_index_order.value[1].value = temp_data.data.data.records
  total_size.value = temp_data.data.data.total
  startChinaIndexAutoPlay()
})
</script>

<template>
  <div class="card">
    <div class="card_content">
      <div class="card_title">
        <span>新股上市日历</span>
      </div>
      <div class="newStock_index_table">
        <div class="newStock_index_tablehead">
          <span>证券简称</span>
          <span>上市日期</span>
        </div>
        <div id="newStock_index_data_container" @mousedown="getCurrent" @mouseup="judgeMoveDirection"
          @mouseleave="judgeMoveDirection" @mouseover="stopChinaIndexAutoPlay" @mouseout="startChinaIndexAutoPlay">
          <div class="newStock_index_carousel_content_framework" ref="newStock_index_carousel_content_framework">
            <div class="newStock_index_data_content" style="left: 0%">
              <div class="newStock_index_data_column" v-for="item in newStock_index_1" :key="item">
                <span>{{ item.stock_name }}</span>
                <span>{{ item.listing_date }}</span>
              </div>
            </div>
            <div class="newStock_index_data_content" style="left: 33.3%">
              <div class="newStock_index_data_column" v-for="item in newStock_index_2" :key="item">
                <span>{{ item.stock_name }}</span>
                <span>{{ item.listing_date }}</span>
              </div>
            </div>
            <div class="newStock_index_data_content" style="left: 66.6%">
              <div class="newStock_index_data_column" v-for="item in newStock_index_3" :key="item">
                <span>{{ item.stock_name }}</span>
                <span>{{ item.listing_date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card_background">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<style scoped>
.newStock_index_table {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.newStock_index_tablehead {
  display: flex;
  width: 100%;
  height: 34px;
  line-height: 34px;
  background-color: #06245e;
  color: #bdbfc7;
  font-weight: bolder;
  font-family: '黑体';
  font-size: 17px;
}

.newStock_index_tablehead> :nth-child(1) {
  display: inline-block;
  width: 65%;
  height: 100%;
  padding-left: 20px;
}

.newStock_index_tablehead> :nth-child(2) {
  width: 35%;
  height: 100%;
  padding-left: 10px;
}

#newStock_index_data_container {
  position: relative;
  display: flexbox;
  width: 100%;
  height: calc(100% - 78px);
  margin-top: 10px;
  background-color: #06245e;
  padding-top: 8px;
  overflow: hidden;

  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}

.newStock_index_carousel_content_framework {
  width: 300%;
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.newStock_index_data_content {
  display: inline-block;
  position: absolute;
  width: 33.3%;
  height: 100%;
  transition: left 0.5s ease;
  overflow-y: scroll;
  padding-top: 8px;
}

.newStock_index_data_column {
  display: flex;
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  color: #d0d0d0;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-size: 18px;
  box-sizing: content-box;
}

.newStock_index_data_column> :nth-child(1) {
  display: inline-block;
  width: 65%;
  height: 100%;
  padding-left: 20px;
  font-stretch: extra-expanded;
}

.newStock_index_data_column> :nth-child(2) {
  width: 35%;
  height: 100%;
  padding-left: 10px;
  color: #30c2ff;
}

.card {
  width: 48%;
  height: 47%;
  margin: 1%;
}
</style>
: (arg0: { (): void; (): void; }) => void: { clientX: null; }: { clientX:
number; }
